<template>
  <div class="maincontent csaro">
    <el-tabs v-model="mainTab">
      <el-tab-pane label="基本信息" name="jbxx">
        <el-form
          class="basicInfoForm"
          :inline="true"
          label-position="left"
          ref="examineForm"
          :model="examineOpinion"
          :rules="examineOpinionRule"
          label-width="80px"
        >
          <div class="formcontent">
            <div>
              <el-form-item label="入库通知书编号" label-width="112px">
                <el-input readonly v-model="storeNotifyNumber" style="width: 300px;"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="maintitle">项目基本情况</div>
          <div class="basicInfo">
            <div>
              <span class="tit" v-if="proBasicData.name">项目名称：</span>
              <span v-if="proBasicData.name">{{proBasicData.name}}</span>
              <span class="tit" v-if="proBasicData.districtRegion">位置：</span>
              <span
                v-if="proBasicData.districtRegion"
              >{{proBasicData.districtRegion.name}}{{proBasicData.countrysideRegion.name}}{{proBasicData.villageRegion.name}}</span>
              <span class="tit" v-if="proBasicData.frameNumber">图幅号：</span>
              <span v-if="proBasicData.frameNumber">{{proBasicData.frameNumber}}</span>
              <span class="tit" v-if="proBasicData.typeName">项目类型：</span>
              <span v-if="proBasicData.typeName">{{proBasicData.typeName}}</span>
              <span class="tit" v-if="proBasicData.duration">项目工期：</span>
              <span v-if="proBasicData.duration">{{proBasicData.duration}}年</span>
            </div>
          </div>

          <div class="maintitle">建设规模</div>
          <div class="basicInfo" v-if="planDesignResults">
            <div>
              <span class="tit">建设规模：</span>
              <span>{{planDesignResults.constrPredictTotalArea}}公顷</span>
              <span class="tit">拟建成高标准基本农田面积：</span>
              <span>{{planDesignResults.constrHighLevelFarmland}}公顷</span>
              <span class="tit">整理规模：</span>
              <span>{{planDesignResults.constrPredictOrganizeArea}}公顷</span>
              <span class="tit">开发规模：</span>
              <span>{{planDesignResults.constrPredictDevelopArea}}公顷</span>
            </div>
            <div>
              <span class="tit">新增耕地：</span>
              <span>{{planDesignResults.constrPredictNewFarmland}}公顷</span>
              <span class="tit">新增整理耕地：</span>
              <span>{{planDesignResults.constrPredictOrganizeFarmland}}公顷</span>
              <span class="tit">新增开发耕地：</span>
              <span>{{planDesignResults.constrPredictDevelopFarmland}}公顷</span>
              <span class="tit">新增复垦耕地：</span>
              <span>{{planDesignResults.constrPredictReclaimFarmland}}公顷</span>
            </div>
          </div>

          <div class="maintitle">预算投资金额</div>
          <div class="basicInfo" v-if="planDesignResults">
            <div>
              <span class="tit">工程施工费：</span>
              <!--span>{{planDesignResults.projectConstructionFee}}万元</span-->
              <span class="tit"></span>
              <span>田间道路工程费：{{planDesignResults.projectRoadCost}}万元</span>
              <span class="tit"></span>
              <span>土地平整工程费：{{planDesignResults.projectLandLevelCost}}万元</span>
              <span class="tit"></span>
              <span>农田水利工程费：{{planDesignResults.projectWaterWorksCost}}万元</span>
              <span class="tit"></span>
              <span>生态保护工程费：{{planDesignResults.projectEcoProtectCost}}万元</span>
            </div>
            <div>
              <span class="tit">其他施工费：</span>
              <span class="tit"></span>
              <span>设备购置费：{{planDesignResults.projectEquipmentCost}}万元</span>
              <span class="tit"></span>
              <span>不可预见费用：{{planDesignResults.projectUnpredictableCost}}万元</span>
              <span class="tit"></span>
              <span>项目建设亩均投资：{{planDesignResults.projectInvestmentPerMu}}万元</span>
              <span class="tit"></span>
              <span>新增耕地亩均投资：{{planDesignResults.projectInvestmentFarmlandPerMu}}万元</span>
              <span class="tit"></span>
              <span>其他费用：{{planDesignResults.projectOtherCost}}万元</span>
            </div>
            <div>
              <span class="tit">工程总投资：</span>
              <span>{{planDesignResults.projectTotalInvestment}}万元</span>
            </div>
          </div>

          <div class="maintitle">区县审查意见</div>
          <div class="formAllRow">
            <div>
              <el-form-item label label-width="150px">
                <el-input
                  style="width:774px;"
                  :rows="6"
                  readonly
                  type="textarea"
                  :value="countryOpinion"
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">市中心审查意见</div>
          <div class="formAllRow">
            <div>
              <el-form-item label label-width="150px">
                <el-input
                  style="width:774px;"
                  :rows="6"
                  readonly
                  type="textarea"
                  :value="centerOpinion"
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">市局审查意见信息</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="经办人审核意见" label-width="150px" prop="opinion">
                <el-input
                  style="width:774px;"
                  placeholder="请输入审查意见"
                  :rows="4"
                  type="textarea"
                  :readonly="isCurrentProcess"
                  v-model="examineOpinion.opinion"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <el-image
                  style="width: 120px; height: 60px"
                  :src="`${$config.baseUrlImg}${userInfo.signedPhoto}`"
                ></el-image>
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px" prop="createTime">
                <el-date-picker
                  v-model="examineOpinion.createTime"
                  placeholder="请选择日期"
                  type="datetime"
                  :readonly="isCurrentProcess"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px" prop="status">
                <el-select v-model="examineOpinion.status" :disabled="isCurrentProcess">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="不同意" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="margin-top:60px;">
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
              <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="sclc">
        <div class="processContainer">
          <process :processData="processData"></process>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import process from "../../plannDesignApplication/public/process";
import {
  getDetail,
  getBasicData,
  planningBudgetBasicDetail,
  examineOpinionList,
  saveBackAdministration
} from "@/api/plannDesignBudget/cityStorageAdministrativeReview";
import { mapState } from "vuex";
import moment from "moment";
export default {
  components: {
    process
  },
  data() {
    return {
      mainTab: "jbxx",
      projectId: localStorage.getItem("projectId"),
      storeNotifyNumber: "",
      preOpinions: {},
      examineOpinion: {
        groupId: 9,
        type: 0,
        opinion: "",
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        status: 0
      },
      proBasicData: {},
      fileList: [],
      tableData: [],
      planDesignResults: {},
      processData: [],
      examineOpinionRule: {
        opinion: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value == null || value == "") {
                callback(new Error("请填写审查意见"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        createTime: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value == null || value == "") {
                callback(new Error("请填写审查意见"));
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    countryOpinion() {
      let op = "";
      if (
        this.preOpinions &&
        this.preOpinions["distAuditAdvice"] &&
        this.preOpinions["distAuditAdvice"].length > 0
      ) {
        const distAuditAdvice = this.preOpinions["distAuditAdvice"];
        for (let item of distAuditAdvice) {
          op += `${item.opinionName}：${item.content}；${item.result} \r\n`;
        }
      }
      return op;
    },
    centerOpinion() {
      let op = "";
      if (
        this.preOpinions &&
        this.preOpinions["municipalAuditAdvice"] &&
        this.preOpinions["municipalAuditAdvice"].length > 0
      ) {
        const distAuditAdvice = this.preOpinions["municipalAuditAdvice"];
        for (let item of distAuditAdvice) {
          op += `${item.opinionName}：${item.content}；${item.result} \r\n`;
        }
      }
      return op;
    },
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_CITY_BUREAU_0";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  created() {
    this._initData();
  },
  methods: {
    onSubmit() {
      let isTrue = false;
      this.$refs["examineForm"].validate(valid => {
        isTrue = Boolean(valid);
      });
      if (isTrue) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const examineOpinion = Object.assign(this.examineOpinion, {
          projectId: this.projectId,
          signature: this.userInfo.signedPhoto
        });
        const data = Object.assign(
          { examineOpinion: examineOpinion },
          {
            projectId: this.projectId,
            storeNotifyNumber: this.storeNotifyNumber
          }
        );
        saveBackAdministration(data)
          .then(res => {
            loading.close();
            this.$message.success("提交成功！");
            this.$router.push("/projectManagement/planningStage/dealwith");
          })
          .catch(err => {
            loading.close();
          });
      }
    },
    // 获取图幅号、区县审查、市中心审查
    _getStorageNotifyNumber() {
      getDetail({ projectId: this.projectId }).then(res => {
        if (res.data) {
          this.storeNotifyNumber = res.data.storeNotifyNumber;
          let po = {};
          po = Object.assign({ distAuditAdvice: res.data.distAuditAdvice });
          po = Object.assign(po, {
            municipalAuditAdvice: res.data.municipalAuditAdvice
          });
          this.preOpinions = po;
        }
      });
    },
    // 获取项目基础信息
    _getProBasicData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getBasicData({ projectId: this.projectId })
        .then(res => {
          if (res.data) {
            this.proBasicData = res.data;
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    // 获取项目规划预算编制成果基础数据
    _getPlanDesignResults() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      planningBudgetBasicDetail({ projectId: this.projectId })
        .then(res => {
          if (res.data) {
            this.planDesignResults = res.data;
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    // 审查流程/审查意见数据获取
    _getProcessList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.processData = ["经办人审核意见"];
      const opinionType = this.examineOpinion.type;
      examineOpinionList({
        groupId: this.examineOpinion.groupId,
        projectId: this.projectId
      })
        .then(res => {
          if (res.data.length > 0) {
            // 审核意见
            const inx = res.data.findIndex(item => {
              return item.type == opinionType;
            });
            if (inx !== -1) {
              // 当前阶段审核意见
              this.examineOpinion = res.data[inx];
            }
          }
          // 流程数据获取
          let processList = this.processData.slice();
          for (let i = 0; i < processList.length; i++) {
            let temp = {
              // 审查流程初始化
              isReview: false,
              institutions: processList[i],
              status: 0
            };
            if (res.data[i]) {
              // 判断是否存在已走流程
              const item = res.data[i];
              temp["isReview"] = true;
              temp["groupId"] = item.groupId;
              temp["type"] = item.type;
              temp["status"] = item.status;
              temp["people"] = `${this.$config.baseUrlImg}${item.signature}`;
              temp["date"] = item.createTime;
              temp["advice"] = item.opinion;
            }
            processList[i] = temp;
          }
          this.processData = processList;
          this.beforeOpinions = processList.slice(0, opinionType);
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    // 获取初始数据
    _initData() {
      this._getStorageNotifyNumber();
      this._getProBasicData();
      this._getPlanDesignResults();
      this._getProcessList();
    }
  }
};
</script>
<style lang="scss" scoped>
.csaro {
  /deep/ .el-tabs__content {
    overflow: unset;
  }
  /deep/ .el-tabs__header {
    background: #fff;
    height: 46px;
    padding: 0 20px;
    /deep/ .el-tabs__item {
      height: 36px;
      line-height: 36px;
      margin-top: 10px;
      padding: 0 10px;
    }
    /deep/ .el-tabs__nav-wrap::after {
      width: 0;
    }
  }
  .basicInfoForm {
    /deep/ .el-form-item__content {
      padding-right: 60px;
    }
    /deep/ .el-form-item__label {
      color: #666;
      text-align: right;
    }
    .basicSituation {
      /deep/ .el-form-item__label {
        color: #666;
        text-align: left;
        padding: 0;
      }
    }
    /deep/ .el-input__suffix-inner {
      color: #8c8c8c;
      i {
        font-style: normal;
      }
    }
    .labelNormal {
      label {
        font-weight: normal;
        color: #a6a6a6;
        font-size: 13px;
      }
    }
    .equalArea {
      /deep/ .el-form-item__content {
        padding-right: 20px;
      }
    }
  }
  .formAllRow {
    /deep/ .el-form-item__content .el-textarea .el-textarea__inner {
      width: 1170px;
      max-width: calc(100vw - 320px - 60px);
    }
    /deep/ .el-form-item__label {
      display: block;
      text-align: left;
      margin-top: 15px;
    }
    /deep/ .el-form-item {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 120px);
}
.maincontent {
  height: calc(100vh - 114px);
  padding: 30px;
  overflow: auto;
  background: #f5f6f7;
  .basicInfoForm {
    background: #fff;
    padding: 20px;
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfoForm {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #999999;
    }
    .tit {
      color: #666666;
      font-weight: bold;
      margin-right: 0;
      height: 40px;
      line-height: 40px;
      margin: 0;
    }
    .basicSituation {
      margin-top: 20px;
    }
  }
  .equalArea div .tit:nth-of-type(2n) {
    margin-left: 40px;
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
}
</style>

